<!--
 * Date: 2019年11月18日 16:13:17
 * LastEditors: lvyou
 * LastEditTime: 2019年12月13日 15:32:30
 * FilePath: \youlinweb-master\src\components\statistics\newone.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
  <div class="bg1 a-c text-center">
    <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-title1.png" class="title1" />
    <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-firework.gif" class="firework" />
    <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-twomouse.gif" class="title1 twomouse" />
    <img :src="rightUrl" class="firework" />
    <div class="new1-text-wrap flex-colum">
      <div class="flex">
        <img :src="form.headImg" class="statistics-avatar" />
        <div class="name-wrap v-c">
          <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-new1-dear@2x.png" class="new1-dear" />
          <span class="statistics-nickname">{{form.nickName||form.name}}</span>
        </div>
      </div>
      <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-new1-txt@2x.png" class="new1-text" v-if="type==0" />
      <div class="old1-text-wrap v-c" v-if="type==1">
        <span class="old1-date">{{form.loginYear}}</span>
        <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-year.png" class="old1-date-img" />
        <span class="old1-date">{{form.loginMonth}}</span>
        <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-month.png" class="old1-date-img old1-date-img-month" />
        <span class="old1-date">{{form.loginDay}}</span>
        <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-day.png" class="old1-date-img old1-date-img-day" />
      </div>
      <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-meet.png" class="old1-meet" v-if="type==1" />
      <div class="old1-greentown-wrap old1-text-wrap v-c" v-if="type==1" >
        <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-greentown.png" class="old1-greentown mb5" />
        <span class="old1-date">{{form.userId}}</span>
        <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-txt2@2x.png" class="old1-txt2"  />
      </div>
      <img src="https://youlingqinius.wonderlandnet.cn/statistics-youlin-old1-family.png" class="old1-family"  v-if="type==1" />
    </div>
  </div>
</template>

<script>
export default {
  name: "newone",

  components: {},

  props: {
    type: {
      //0新，1旧
      type: Number,
      default: -1
    },
    form: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      weiLeft: 0
    };
  },

  computed: {
    rightUrl() {
      let url = "";
      if (this.type == 0) {
        url = "https://youlingqinius.wonderlandnet.cn/statistics-youlin-right.gif";
      } else {
        url = "https://youlingqinius.wonderlandnet.cn/statistics-youlin-all-right.gif";
      }
      return url;
    }
  },

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {
    appendZero(obj) {
      if (obj < 10) return "0" + "" + obj;
      else return obj;
    }
  }
};
</script>

<style lang="less">
.statistics-container {
  .bg1 {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("https://youlingqinius.wonderlandnet.cn/statistics-youlin-bg1.png") no-repeat center center fixed;
    background-size: 100% 100vh;
    background-position: center;
  }
  .firework {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .title1 {
    width: auto;
    height: 3.4rem;
    top: 55px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .twomouse {
    bottom: 0;
    top: auto;
    height: 3.4rem;
  }
  .statistics-avatar {
    border-radius: 50%;
    height: 0.9rem;
  }
  .new1-text-wrap {
    height: 6.8rem;
    width: 5.74rem;
    margin-top: 6rem;
    margin-left: -0.8rem;
    position: relative;
    display: flex;
    .new1-text {
      width: 5.74rem;
      height: 2.25rem;
    }
    .name-wrap {
      margin: 0.3rem 0 0 0.1rem;
      display: flex;
      .new1-dear {
        width: 1.48rem;
        height: 0.51rem;
        padding-right: 0.05rem;
      }
      .statistics-nickname {
        font-size: 0.44rem;
        color: #ffffff;
        font-family: PingFangSC-Medium, sans-serif;
      }
    }
  }
  .old1-text-wrap {
    color: #ffde00;
    font-size: 0.48rem;
    margin-bottom: 0.05rem;
    .old1-date-img {
      width: 0.44rem;
      height: 0.44rem;
      margin: 0.05rem;
    }
    .old1-date-img-month {
      width: 0.31rem;
    }
    .old1-date-img-day {
      width: 0.27rem;
    }
  }
  .old1-meet {
    width: 3.37rem;
    height: 0.53rem;
    margin-bottom: 0.1rem;
  }
  .old1-greentown-wrap {
    .old1-greentown {
      width: 2.35rem;
      height: 0.51rem;
    }
    .old1-txt2{
      width: 0.46rem;
      padding-top: 0.05rem;
    }
  }
  .old1-family{
    width: 5.28rem;
    height: 0.53rem;
  }
}
</style>

